<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <header>
      <div class="navs">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <img src="./img/logo.png" alt="#" />
        </div>
        <div class="navs-right">
          <ul>
            <li>
              <a href="#">返回首页</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">企业邮箱</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">远征学院</a>
            </li>
          </ul>
          <div class="language">
            <a href="#">中文</a>
            <a href="#">EN</a>
          </div>
        </div>
      </div>
      <div class="navs-bottom">
        <ul>
          <li>关于远征</li>
          <li>新闻中心</li>
          <li>研发与质管</li>
          <li>产品与服务</li>
          <li>生产与设备</li>
          <li>联系我们</li>
        </ul>
      </div>
    </header>
    <main style="margin-top: 10px">
      <div>
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./img/a.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./img/b.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./img/c.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./img/d.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 80px;
          margin: 50px;
        "
      >
        <div>
          <div>
            <div style="display: flex; align-items: center; gap: 20px">
              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 2px solid red;
                  gap: 10px;
                  padding: 8px;
                "
              >
                <img src="./img/icon1.png" style="width: 36px" alt="" />
                <span style="font-size: 20px; color: red">远征药业</span>
              </div>
              <div style="height: 36px">
                <span style="font-size: 20px; color: #a9a9a9; line-height: 36px"
                  >about us</span
                >
              </div>
            </div>
            <div style="height: 1px; border-top: 1px dashed #a9a9a9"></div>
          </div>
          <div>
            <video
              src=""
              style="
                width: 480px;
                height: 345px;
                border: 1px solid #000;
                margin-top: 50px;
              "
            ></video>
          </div>
        </div>
        <div style="flex: 1 1 0">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="display: flex; align-items: center; gap: 20px">
              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 2px solid red;
                  gap: 10px;
                  padding: 8px;
                "
              >
                <img src="./img/icon2.png" style="width: 36px" alt="" />
                <span style="font-size: 20px; color: red">公司新闻</span>
              </div>
              <div style="flex: 1; height: 36px">
                <span
                  style="
                    font-size: 20px;
                    color: #a9a9a9;
                    flex: 1;
                    line-height: 36px;
                  "
                  >Company news</span
                >
              </div>
            </div>
            <div style="font-weight: 700">more></div>
          </div>
          <div style="height: 1px; border-top: 1px dashed #a9a9a9"></div>
          <div>
            <ul style="margin-top: 50px">
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
              <li class="xinwen">
                <div style="display: flex; align-items: center; gap: 10px">
                  <span
                    style="
                      color: #fff;
                      background-color: red;
                      font-size: 12px;
                      padding: 2px;
                    "
                    >新闻</span
                  >
                  <span>栉风沐雨砥砺行&nbsp;不负韶华启新程</span>
                </div>
                <div>2025-01-01</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        "
      >
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1200px;
            height: 370px;
            position: relative;
            background-image: url(./img/rep.jpg);
          "
        >
          <div style="position: absolute; top: 120px; left: 60px; color: #fff">
            <div style="font-size: 24px; font-weight: 700">
              河北远征药业有限公司
            </div>
            <div
              style="
                font-size: 16px;
                margin: 20px 0;
                width: 420px;
                font-weight: 700;
              "
            >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河北远征药业有限公司是一家集兽药产品研发、生产经营、技术服务于一体的高科技综合性兽药企业，是中国兽药制剂行业的领军企业之一。
            </div>
            <div
              style="
                font-size: 16px;
                padding: 4px;
                border: 1px solid #fff;
                display: inline-block;
              "
            >
              查看详情
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
          "
        >
          <img src="./img/roll1.jpg" alt="" />
        </div>
      </div>
    </main>
    <footer
      style="
        border-top: 2px solid red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 100px;
        background-color: #f3f3f3;
      "
    >
      <div>
        <img src="./img/lt.png" alt="" />
      </div>
      <div style="display: flex; flex-direction: column; gap: 20px">
        <div class="f1">
          <ul style="display: flex; align-items: center; gap: 20px">
            <li>关于远征</li>
            <li>|</li>
            <li>研发与质管</li>
            <li>|</li>
            <li>产品与服务</li>
            <li>|</li>
            <li>生产与设备</li>
            <li>|</li>
            <li>新闻中心</li>
            <li>|</li>
            <li>联系我们</li>
          </ul>
        </div>
        <div>
          <span style="margin-right: 20px">版权归河北远征药业有限公司所有</span>
          <span>联系热线：</span>
          <span style="color: #da252d; font-size: 18px">0311—86839676</span>
        </div>
        <div>
          <span>总部地址：中国·河北石家庄市长安区柳源路16号</span>
        </div>
        <div>
          <span style="font-size: 12px; color: #7e7e7e"
            >Copyright© 2017
            河北远征药业有限公司 冀ICP备10208355号 冀公网安备13010202004007 尚武科技技术支
            持</span
          >
        </div>
      </div>
      <div>
        <img src="./img/rt.jpg" alt="" />
      </div>
    </footer>
  </body>
  <style></style>
  <script type="module">
    import Swiper from "https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js";
    var swiper = new Swiper(".mySwiper", {
      autoplay: {
        delay: 1000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
      loop: true,
    });
  </script>
</html>
